<template>
    <v-section name="box" description="">
        <box title="Box"></box>
    </v-section>


    <v-section name="dropdown" description="">
        <dropdown></dropdown>
        <dropdown btn-class="btn-primary"></dropdown>
        <dropdown btn-class="btn-info" action-text="Test">
            <li><a href="#">Test</a></li>
            <li><a href="#">one action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </dropdown>
    </v-section>


    <v-section name="modal" description="">
        <button class="btn btn-default" @click="isCloseModal = false">Show modal</button>
        <modal title="Modal title" :is-close.sync="isCloseModal" :callback="alerttest">
            <div slot="modal-header" class="modal-header">
                <h4 class="modal-title">Modal <b>Title</b></h4>
            </div>
            <div slot="modal-body" class="modal-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </modal>
    </v-section>


    <v-section name="appbtn" description="">
        <app-btn color="bg-red" text="like" icon="fa-heart-o" :total="300"></app-btn>
    </v-section>


    <v-section name="select" description="">
        <v-select :options="fruitOptions" :value.sync='arr' :search='true'></v-select>
    </v-section>


    <v-section name="tabs" description="">
        <tabs>
            <!--<tab header="test">test1</tab>-->
            <!--<tab header="test2">test2</tab>-->
            <tab header="baidu" content="<br />">baidu</tab>
            <tab v-for="item in tabItems" :header="item['header']">
                {{item.header}}
            </tab>
        </tabs>
        <button @click="addTab">加一个tab</button>
    </v-section>


    <v-section name="datatable" description="">
        <data-table :datas="datas" :columns="columns" :operation="true" :check-values.sync="checkValues" :per-page-count="10">
            <select slot="batch" @change="showCheckValues(selected)" v-model="selected" class="form-control">
                <option selected value="default">请选择一项操作</option>
                <option value="test">测试</option>
            </select>
            <dropdown action-text="操作" slot="operation">
                <li v-for="op in operation" >

                    <a class="btn {{op['class']}}" @click="op['method']($event,datas)">
                        <!--{{item['name']}}-->
                      <!--{{$index}}-->
                      <!--{{datas[$index]['power']}}-->
                        {{op['btnName']}}
                    </a>
                </li>
            </dropdown>
        </data-table>
    </v-section>


    <v-section name="switch" description="">
        <switch on-text="on" off-text="off"></switch>
        <switch on-text="on" off-text="off" :disabled="true"></switch>
    </v-section>
    <v-section>
        {{process}}
        <upload action="http://10.0.1.11/file" :process.sync="process"></upload>
    </v-section>
</template>

<script>
    import Box from './Box.vue'
    import Dropdown from './Dropdown.vue'
    import Modal from './Modal.vue'
    import AppBtn from './ApplicationButton.vue'
    import vSelect from './Select.vue'
    import Tabs from './Tabs.vue'
    import Tab from './Tab.vue'
    import DataTable from './DataTable.vue'
    import Switch from './Switch.vue'
    import vSection from './Section.vue'
    import Upload from './Upload.vue'
    export default{
        components: {
            Box, Dropdown, Modal, AppBtn, vSelect, Tabs, Tab, DataTable, Switch, vSection, Upload
        },
        data(){
            return {
                isCloseModal: true,
                alerttest: function () {

                    console.log("哈哈哈")

                },
                tabItems: [
                    {
                        header: "test4",
                        url: null
                    }
                ],
                fruitOptions: [
                    {value: 'apple', label: 'Apple'},
                    {value: 'banana', label: 'Banana'},
                    {value: 'cherry', label: 'Cherry'},
                    {value: 'orange', label: 'Orange'},
                    {value: 'grape', label: 'Grape'},
                ],
                arr: [],
                datas: [

                    {id: 3, name: 'Jet Li1', power: 18000},
                    {id: 4, name: 'Jet Li2', power: 28000},
                    {id: 5, name: 'Jet Li3', power: 38000},
                    {id: 6, name: 'Jet Li4', power: 48000},
                    {id: 7, name: 'Jet Li5', power: 58000},
                    {id: 8, name: 'Jet Li6', power: 68000},
                    {id: 9, name: 'Jet Li7', power: 78000},
                    {id: 10, name: 'Jet Li8', power: 88000},
                    {id: 11, name: 'Jet Li9', power: 98000},
                    {id: 12, name: 'Jet Li10', power: 108000},
                    {id: 13, name: 'Jet Li11', power: 118000},
                    {id: 14, name: 'Jet Li12', power: 128000},
                    {id: 15, name: 'Jet Li13', power: 138000},
                    {id: 16, name: 'Jet Li14', power: 148000},
                    {id: 17, name: 'Jet Li15', power: 158000},
                    {id: 18, name: 'Jet Li16', power: 168000},
                    {id: 19, name: 'Jet Li17', power: 178000},
                    {id: 20, name: 'Jet Li18', power: 188000},
                    {id: 21, name: 'Jet Li19', power: 198000},
                    {id: 22, name: 'Jet Li20', power: 208000},
                    {id: 23, name: 'Jet Li21', power: 218000},
                    {id: 24, name: 'Jet Li22', power: 228000},
                    {id: 25, name: 'Jet Li23', power: 238000},
                    {id: 26, name: 'Jet Li24', power: 248000},
                    {id: 27, name: 'Jet Li25', power: 258000},
                    {id: 28, name: 'Jet Li26', power: 268000},
                    {id: 29, name: 'Jet Li27', power: 278000},
                    {id: 30, name: 'Jet Li28', power: 288000},
                    {id: 31, name: 'Jet Li29', power: 298000},
                    {id: 32, name: 'Jet Li30', power: 308000},
                    {id: 33, name: 'Jet Li31', power: 318000},
                    {id: 34, name: 'Jet Li32', power: 328000},
                    {id: 35, name: 'Jet Li33', power: 338000},
                    {id: 36, name: 'Jet Li34', power: 348000},
                    {id: 37, name: 'Jet Li35', power: 358000},
                    {id: 38, name: 'Jet Li36', power: 368000},
                    {id: 39, name: 'Jet Li37', power: 378000},
                    {id: 40, name: 'Jet Li38', power: 388000},
                ],
                columns: {'name': '姓名', 'power': '参数'},
                operation: [
                    {
                        "btnName": "测试",
                        "class": "btn-info",
                        "method": function ($event,datas) {
                          var thisElement=$event.target;
                          var tdElement =thisElement.parentElement.parentElement.parentElement.parentElement;
                          var index = tdElement.getAttribute("data-index")
                          alert(datas[index]['name'])
                        }
                    }
                ],
                checkValues:[],
                selected:"",
                process:0

            }
        },
        methods: {
            addTab(){
                this.tabItems.push({
                    header: "test" + Math.random() * 10,
                    url: null
                })
            },
            showCheckValues(value){
                if(value==="test"){
                    this.selected = "default"
                    console.log("test")
                    console.log(this.checkValues)
                }

            }
        },
        events: {
            onFileClick: function(file) {
                console.log('onFileClick', file);
            },
            onFileChange: function(file) {
                console.log('onFileChange', file);
                // here is where we update our view
                this.fileProgress = 0;
                this.allFilesUploaded = false;
            },
            beforeFileUpload: function(file) {
                // called when the upload handler is called
                console.log('beforeFileUpload', file);
            },
            afterFileUpload: function(file) {
                // called after the xhr.send() at the end of the upload handler
                console.log('afterFileUpload', file);
            },
            onFileProgress: function(progress) {
                console.log('onFileProgress', progress);
                // update our progress bar
                this.fileProgress = progress.percent;
            },
            onFileUpload: function(file, res) {
                console.log('onFileUpload', file, res);
                // update our list
//                this.uploadedFiles.push(file);
            },
            onFileError: function(file, res) {
                console.error('onFileError', file, res);
            },
            onAllFilesUploaded: function(files) {
                console.log('onAllFilesUploaded', files);
                // everything is done!
                this.allFilesUploaded = true;
            }
        }


    }
</script>

<style>
</style>
